<template>
    <div class="c-input-eidt">
        <span style="display: block;" v-if="!showInput" @click="showInput = true">{{val}}</span>
        <el-input v-if="showInput" :size="'mini'" v-model="value" @blur="blurInput" :placeholder="placeholder"></el-input>
    </div>
</template>
<script>

export default {
    name: 'inputEdit',
    components: {
    },
    props: {
        val: '',
        item: {},
        placeholder: ''
    },
    data () {
        return {
            showInput: false,
            value: ''
        }
    },
    mounted () {
        this.value = this.val;
    },
    methods: {
        blurInput () {
            this.showInput = false;
            (this.val != this.value) && this.$emit('blurInput', {item: this.item, val: this.value});
        },
        changeInput () {
            (this.val != this.value) && this.$emit('changeInput', {item: this.item, val: this.value});
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
